<template>
  <div>
    <app-container>
      <tree-table :data="data" :eval-func="func" :eval-args="args" :expand-all="expandAll" border>
        <el-table-column label="事件">
          <template slot-scope="scope">
            <span style="color:sandybrown">{{ scope.row.event }}</span>
            <el-tag>{{ scope.row.timeLine+'ms' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="时间线">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.timeLine+'ms'" effect="dark" placement="left">
              <div class="processContainer">
                <div
                  :style="{ width:scope.row._width * 500+'px',
                            background:scope.row._width>0.5?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
                            marginLeft:scope.row._marginLeft * 500+'px' }"
                  class="process">
                  <span style="display:inline-block"/>
                </div>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="message(scope.row)">点击</el-button>
          </template>
        </el-table-column>
      </tree-table>
    </app-container>
  </div>
</template>

<script>
/**
   Auth: Lei.j1ang
   Created: 2018/1/19-14:54
   */
import treeTable from '@/components/TreeTable'
import treeToArray from '@/views/table/treeTable/customEval'

export default {
  components: { treeTable },
  data() {
    return {
      func: treeToArray,
      expandAll: false,
      data:
          {
            id: 1,
            event: '事件1',
            timeLine: 100,
            comment: '无',
            children: [
              {
                id: 2,
                event: '事件2',
                timeLine: 10,
                comment: '无'
              },
              {
                id: 3,
                event: '事件3',
                timeLine: 90,
                comment: '无',
                children: [
                  {
                    id: 4,
                    event: '事件4',
                    timeLine: 5,
                    comment: '无'
                  },
                  {
                    id: 5,
                    event: '事件5',
                    timeLine: 10,
                    comment: '无'
                  },
                  {
                    id: 6,
                    event: '事件6',
                    timeLine: 75,
                    comment: '无',
                    children: [
                      {
                        id: 7,
                        event: '事件7',
                        timeLine: 50,
                        comment: '无',
                        children: [
                          {
                            id: 71,
                            event: '事件71',
                            timeLine: 25,
                            comment: 'xx'
                          },
                          {
                            id: 72,
                            event: '事件72',
                            timeLine: 5,
                            comment: 'xx'
                          },
                          {
                            id: 73,
                            event: '事件73',
                            timeLine: 20,
                            comment: 'xx'
                          }
                        ]
                      },
                      {
                        id: 8,
                        event: '事件8',
                        timeLine: 25,
                        comment: '无'
                      }
                    ]
                  }
                ]
              }
            ]
          },
      args: [null, null, 'timeLine']
    }
  },
  methods: {
    message(row) {
      this.$message.info(row.event)
    }
  }
}
</script>
